<template>
    <div class="left-column">
        <!-- 左上柱形图 -->
        <panel :options='options1'>
            <template #title><span>柱形图-就业行业</span></template>
        </panel>
        <!-- 左中折线图 -->
        <panel :options='options2' :isHasYear="true">
            <template #title><span>折线图-人员变化</span></template>
            <template #year>
                <a href="#" @click.prevent="getData1">2020年</a>
                <a href="#" @click.prevent="getData2">2021年</a>
            </template>
        </panel>
        <panel :options='options3'>
            <template #title><span>饼状图-年龄分布</span></template>
        </panel>
    </div>
</template>

<script>
    import Panel from 'components/common/Panel'
    import {
        leftColumnOptions1,
        yearData,
        leftColumnOptions2,
        leftColumnOptions3
    } from '@/utils/options'
    export default {
        name: 'LeftColumn',
        components: {
            Panel
        },
        data() {
            return {
                //左上柱形图echarts数据源
                options1: leftColumnOptions1,
                //左中折线图echarts数据源
                options2: leftColumnOptions2,
                //左下饼图
                options3: leftColumnOptions3,
                //点击年份切换数据,这个是年份的数据
                yearData
            }
        },
        methods: {
            //点击2020
            getData1() {
                console.log("diidi1");
                this.options2.series[0].data = yearData[0].data[0]
                this.options2.series[1].data = yearData[0].data[1]
            },
            //点击2021
            getData2() {

                this.options2.series[0].data = yearData[1].data[0]
                this.options2.series[1].data = yearData[1].data[1]
            }
        }
    }
</script>

<style lang='less' scoped>
    .left-column {
        flex: 3;
        height: 90%;
        a {
            text-decoration: none;
            color: #fff;
        }
    }
</style>